<template>
    <div class="page">
        <head-item :title="title"></head-item>
        <div class="top">
            <van-swipe >
                <van-swipe-item v-for="(item,index) of banner" :key="index">
                <img :src="item.imageUrl" >
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="content">
            <read-list v-for="item of postList" :key="item.postId" :data="item"></read-list>
        </div>
    </div>
</template>

<script>
import HeadItem from '@/components/Head.vue';
import ajax from '@/api/ajax.js';
import data from '../../../data/local.js';
import ReadList from './components/ReadList';
    export default {
        components:{
            HeadItem,
            ReadList
        },
        data(){
            return {
                title:'阅读',
                banner:[],
                postList:[]
            }
        },
        async mounted(){
            var {postList,bannerUrl} = data;
            let res =await ajax("http://localhost:3000/banner");
            this.banner = res.banners;
            this.postList = postList;
        }
    }
</script>

<style lang="less" scoped>
@top:46px;
@bottom:50px;
    .page{
        background: #eeeeee;
        padding-top: @top;
        padding-bottom: @bottom;
    }
    .top{
        width: 100%;
        height: 200px;
        img{
            width: 100%;
            height: 200px;
        }
    }
</style>